<template>
  <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
    <div class="app-container">
      <div class="mine-head">
        <div class="mine-head-left">
          <van-image :src="Banner1" round width="3rem" height="3rem" />
          <!-- <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="32" color="#ffffff" /> -->
        </div>
        <div class="mine-head-right">
          <div>
            <h4>ID:{{ state.paramsData.userId }}</h4>
            <p>vip会员</p>
          </div>
          <van-button type="primary" size="small" @click="settingMine">退出</van-button>
        </div>
      </div>
      <div class="mine-main">
        <van-tabs v-model:active="active" @change="tabsChange()" animated>
          <van-tab title="主播">
            <div class="list-box" v-if="active == 0">
              <div class="list-left" v-if="goodsListLeft.length">
                <template v-for="item in goodsListLeft" :key="item">
                  <GoodItem :goodsItemDetail="item" />
                </template>
              </div>
              <div class="list-right" v-if="goodsListRight.length">
                <template v-for="item in goodsListRight" :key="item">
                  <GoodItem :goodsItemDetail="item" />
                </template>
              </div>
            </div>
            <div class="vip-photo-none" v-if="!anchorList.length">
              <van-empty image="error" image-size="80" description="暂无数据" />
            </div>
          </van-tab>
          <van-tab title="照片">
            <div class="anchor-main-list" v-if="active == 1">
              <div class="list-img-box" v-if="anchorPhotoList.length">
                <div class="list-img-item" v-for="item in goodsList" :key="item.h5Id">
                  <div class="timer-box">
                    <van-image width="48" height="48" round
                      :src="'http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/183b20029c094cca98deb00d2c6965a4.jpg?x-oss-process=image/resize,w_100,h_200'"
                      fit="cover" />
                    <p>糖糖</p>
                  </div>
                  <div class="anchor-box">
                    <AnchorItem :dateItemDetail="item" />
                    <p>2024-05-07</p>
                  </div>
                </div>
              </div>
              <div class="vip-photo-none" v-else>
                <van-empty image="error" image-size="80" description="暂无数据" />
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import Banner1 from "@/assets/image/icon_hand1.png"
import { showToast } from 'vant';

import userOrderStore from "@/store/index.js"
import EventBus from '@/utils/EventBus';

import {
  GetClientAnchorList
} from "@/api/mine/index.js"

let userInfo = userOrderStore()

import GoodItem from "@/components/goodsItem/index.vue"
import AnchorItem from "@/components/anchorItem/index.vue"

const route = useRoute()
const router = useRouter()

const state = reactive({
  goodsList: [],
  paramsData: {
    userId: "",
    pageSize: 10,
    pageNum: 1,
  }
})

const { goodsList } = toRefs(state)

let anchorList = ref([])

let anchorPhotoList = ref([])

let goodsListLeft = computed(() => anchorList.value.filter((o, i) => i % 2 == 0))
let goodsListRight = computed(() => anchorList.value.filter((o, i) => i % 2 == 1))

let active = ref(0)
const tabsChange = () => {
  state.paramsData.userId = localStorage.getItem("userId")
  state.goodsList = active.value == 0 ? anchorList.value : anchorPhotoList.value
  if (!loadingRefresh.value) {
    userInfo.setIsPageLoading(true)
  }
  if (active.value == 0) {
    state.paramsData.pageNum = 1
    anchorList.value = []
    console.log(state.paramsData, 'state.paramsData')
    getClientAnchorListFn(state.paramsData)
  } else {
    userInfo.setIsPageLoading(false)
    loadingRefresh.value = false
  }
}

const getClientAnchorListFn = async (paramsData) => {
  try {
    let data = await GetClientAnchorList(paramsData)
    anchorList.value = data.rows
    state.goodsList = data.rows
    userInfo.setIsPageLoading(false)
    loadingRefresh.value = false
    console.log(userInfo, loadingRefresh.value, 'user5555Info', anchorList.value)
  } catch (error) {
    loadingRefresh.value = false
    userInfo.setIsPageLoading(false)
  }

}

const settingMine = () => {
  localStorage.clear()
  router.push({
    name: 'register'
  })
}

let loadingRefresh = ref(false)
const onRefresh = () => {
  state.paramsData.pageNum = 1
  anchorList.value = []
  state.goodsList = []
  loadingRefresh.value = true
  tabsChange()
}

onMounted(() => {
  tabsChange()
})

</script>



<style lang="scss" scoped>
.mine-head {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #fff;

  .mine-head-left {
    height: 3em;
  }

  .mine-head-right {
    margin-left: 10px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    h4 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #333;
    }
  }
}

.mine-main {
  margin-top: 5px;
}

.app-container {
  background: #f2f2f2;
  overflow: auto;
  min-height: 100vh;
}

.footer-tips {
  color: #999;
  text-align: center;
  margin-top: 10em;
}
</style>
